<template>
  <div class="wrap">
    <div class="nav">
      <div class="box-wrap">
        <div class="left">
          <img  class="shangb" :src="merchantData.MerchantImg" alt="" />
        </div>
        <div class="right">
          <p class="tittle">{{merchantData.MerchantName}}</p>
          <div class="min-tittle">
            <div class="t-l">{{merchantData.MerchantDelivery}}</div><div class="t-r">{{merchantData.DeliveryTime}}</div>
          </div>



        </div>
      </div>
    </div>
    <div class="search">
      <div class="search-box">
        <div class="input">
          <img class="img-l" src="../../../static/images/search.png" alt="" />
          <input  class="srch" type="text"  ref="input" :placeholder=dateinit  />
        </div>
        <img  class="img-r" src="../../../static/images/ai.png" alt=""  @click="youhui"/>
      </div>
      <div class="dialog" v-show="youjuan">

          <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
          <div class="dialog-cover back"></div>
          <!-- transition 这里可以加一些简单的动画效果 -->
          <transition name="drop">
            <!--style 通过props 控制内容的样式  -->
            <div class="dialog-content">
              <div class="dialog_head back">
                <!--弹窗头部 title-->
                <div class="header">
                  <b>没有优惠卷</b>
                </div>
              </div>
              <div class="dialog_main">
                <!--弹窗的内容-->
                <div class="main">
                  <br />所有优惠活动及相关说明，你没有拥有最终解释权。
                </div>
              </div>
              <!--弹窗关闭按钮-->
              <div class="foot_close">
                <div class="close_img back" @click="youhui">确&nbsp;认</div>
              </div>
            </div>
          </transition>

      </div>





    </div>
    <div class="wrrap-content">
      <div class="wrrap1">
        <div class="conent">
          <p :class="['content-nav',{'nav-other':index===current}]" @click="handlechoose(index,im.GoodsSortId)" v-for="(im,index) in goodsort" :key="index">{{im.SortName}}</p>
        </div>
      </div>
      <div class="wrrap2"  v-show="indx===current" v-for="(ims,indx) in goodsort" :key="indx" >
        <div class="conent">
         <jiajian  v-for="(ia,inx) of allgoods" :key="inx" :ia="ia"  />
        </div>
      </div>
    </div>
    <Settlement />

  </div>
</template>

<script>
// Use Vuex
//
// import {mapState} from 'vuex'
// <div class="bottom-nav">
//   <div class="go-box">
//   <div class="go">
//   <img  class="go-i" src="../../../static/images/gog.png" alt="" />
//   </div>
// 购物车是空的
// </div>
// <div class="Settlement">
//   去结算
//   </div>
//   </div>
import Settlement from '../Settlement/index'
import jiajian from '../jiajian/jiajian'
export default {
  components:{
    jiajian,
    Settlement
  },
  props: [
    'item',
    'index',
    'merchant'
  ],
  data() {
    return {

      delia: '',
      title:'',
      merchantDetail:{},
      content:{},
      dateinit:'请不要搜索，蟹蟹',
      youjuan:false,
      show:true,
      hhhh:['数据1','数据2','数据1','数据2','数据1','数据2','数据1','数据2','数据1','数据2','数据1','数据2','数据1','数据2'],
      current:0,
      goods:{},
      merchantId:'',
      merchantData:'',
      goodsort:'',
      goodlaber:'',
      allgoods:'',
      nowmerchant:'',



    }
  },
  methods: {
    handlegoodsort(){
      var that=this;

      // console.log(this.merchantSortid);
      wx.request({
        url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
        method: 'post',
        data: {
          type: 'findGoods',
          goodlaber:this.goodlaber
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success: function (res) {
          that.allgoods = res.data.address;
          // console.log(that.allgoods);
        }
      });

    },
    youhui(){
      this.youjuan=!this.youjuan
    },
    handlechoose(index,a){
      this.current=index;
      this.goodlaber=a;
      this.handlegoodsort();
    },
    handleprice(ia){
      console.log(ia)
    }


  },
  mounted(){
    var that=this;
    wx.getSystemInfo({
      success: function(res) {
        that.scrollHeight=res.windowHeight-95;
      }
    })

  },



  onLoad: function (options) {


      this.merchantId=options.index;
      // this.title=options.index;
      // this.delia=options.orderX;
      // console.log(this.merchantId);
      var that=this;

    // console.log(this.merchantSortid);
    wx.request({
      url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
      method: 'post',
      data: {
        type: 'findMerchant2',
        merchantId:this.merchantId
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: function (res) {
        that.merchantData=res.data.address;
        that.nowmerchant=that.merchantData.MerchantName;
        that.global.nowmerchant=that.nowmerchant;

        // console.log(that.merchantData);
      }
    });
    wx.request({
      url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
      method: 'post',
      data: {
        type: 'findGoodsSort',
        merchantId:this.merchantId
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: function (res) {
        that.goodsort=res.data.address;
        that.goodlaber=that.goodsort[0].GoodsSortId;
        that.handlegoodsort();

        // console.log(that.goodlaber);
        // console.log(that.goodsort);
      }
    })
      // this.merchantDetail=this.listTmp[this.delia].typeDetail[this.title];
      // this.content=this.listTmp[this.delia].typeDetail[this.title].detail;
      // this.goods=
    // console.log(this.content);
     // console.log('第三页显示的第一页的索引[0,1,2,3,4,4....]'+':'+this.delia);
     // console.log('第三页显示的第二页的索引[0,1,2,3,4]'+':'+this.title);
     // console.log(this.listTmp[this.delia]);
     // this.title='';
     // this.delia='';
    // console.log(this.listTmp);
    // console.log(this.merchantDetail);



  },


  computed: {
    // ...mapState(['listTmp'])
  },
}
</script>

<style>
  .p-dec{
    height: 100%;
    width:75%;
  }
  .p-img{
    height: 100%;
    width:25%;
    text-align: center;
  }
  .p-img-content{
    height: 80%;
    width:80%;
    text-align: center;
    margin:0 auto;
  }
  .nav-other{
    background: #fff;
    height: 80rpx;
    text-align: center;
    line-height:80rpx;
    border-left: 3px solid #49B152;
    color:#1aad19 !important;
  }
  .content-nav{
    height: 105rpx;
    text-align: center;
    line-height:105rpx;
    font-size:27rpx;
    color:#2e2c2d;



  }
  .content-content{
    height: 200rpx;
    background: #ffffff;
    display: flex;
  }

  .wrrap-content{
    display: flex;
    width:100%;
    height: 77%;
  }
  .wrrap1,
  .wrrap2{
    overflow: auto;
    height: 100%;
  }
  .wrrap1{
    width:25%;
  }
  .wrrap2{
    width:75%;
    background-color: #ffffff;
  }
.wrap{
  width:100%;
  height: 100%;

}
  .nav{
    height: 10%;
    width:100%;
    background-color:#49B152;
  }
  .box-wrap{
    height:90%;

    width:95%;
    margin:0 auto;
    color:#fff;
    display: flex;
  }
  .left{
    width:20%;
    height: 100%;

  }
  .right{
    width:78%;
    height: 100%;

    margin-left:12rpx;
  }
  .shangb{
    height: 100%;
    width:100%;
  }
  .tittle{
    font-size:47rpx;
  }
  .min-tittle{
  display: flex;
    font-size:21rpx;
  }
  .t-l{
    border:1px solid #fff;
    border-radius:9rpx;
    width:95rpx;
    text-align:center;

  }
  .t-r{
   margin-left:11rpx;
  }
  .search{

    width:100%;
    border:1px solid yellow;
    height:7%;
    background:#fff;


  }
  .img-l{
    height:30rpx;
    width:30rpx;
    margin-left:12rpx;


  }
  .img-r{
    height: 40rpx;
    width:40rpx;
  }
  .input{
    background-color:#F1F1F1;
    display: flex;
    height: 65%;
    width:90%;
    align-items: center;
  }
  .search-box{
    width:95%;
    height: 100%;

    display: flex;
    margin:0 auto;
    align-items:center;
    justify-content:space-between;

  }
  .srch{
    font-size:28rpx;
  }
.dialog {
  position: relative;
  color: #2e2c2d;
  font-size: 24px;
}
.dialog-cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dialog-content {
  height: 50%;
  width: 80%;
  background: RGBA(251, 251, 251, 1);
  position: fixed;
  top: 18%;
  left: 12%;
  border-radius: 30px;
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
  z-index: 300;
}
.header {
  /* position: absolute; */
  height: 50px;
  display: flex;
  font-size: 30px;
  /* width: 100%; */
  border-bottom: 2px solid RGBA(146, 146, 146, 1);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.foot_close {
  position: absolute;
  height: -45px;
  line-height: 45px;
  bottom: 0px;
  width: 100%;
  border-top: 2px solid RGBA(146, 146, 146, 1);
  text-align: center;
  /* align-items: center; */
  justify-content: center;
  background: #7edbe0;
  border-radius: 15px;
  color: #fff;
  font-size: 31px;
}
.main {
  overflow: auto;
  height: 515px;
  width: 95%;
  margin-left: 18px;
  /* text-align:center; */
}
  .bottom-nav{
    width:100%;
    height: 8%;
    position: absolute;
    bottom:0;
    background-color: #ccc;
    display: flex;

  }
  .go-box{
    height: 100%;
    width:70%;
    position: relative;
    color:#ccc;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .go{
    height: 120rpx;
    width:120rpx;
    position: absolute;
    bottom:23rpx;
    border-radius:50%;
    left:26rpx;
    background-color: #cccccc;
    display:flex;
    justify-content:center;
    align-items:center;


  }
  .Settlement{
    height: 100%;
    width:30%;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;

  }
  .go-i{
    height:80%;
    width: 80%;
    border-radius:50%;
  }
body{
  height: 100%;
  background-color: #F1F1F1;
}
.dec{
  height:60%;
  width:100%;
}
  .goods{
    height: 40%;
    width:100%;
    color:red;
    position: relative;
  }



</style>
